<template>
	<view>
		<view class="">
			<view class="upload" v-if="!upvideoUrl">
				<view class="upload-content">
					<view class="bg-img"></view>
					<image :src="imglink + 'shortvideo/up-video.svg'" disabled mode="" class="upload-img"></image>
					<button class="up-video-btn" style="color: #FF8B46;" type="default" @click="upVideoEnrollment()">点击上传视频</button>
					<view class="specs">
						上传视频需小于3分钟
					</view>
				</view>
			</view>
			<view class="upload" style="background-color: #ffffff;" v-if="upvideoUrl">
				<video style="z-index:1"
					:src="upvideoUrl" 
					:controls="false"
					:show-fullscreen-btn="false" 
					:enable-progress-gesture="false" 
					:show-play-btn="false"
					width="100%"
					webkit-playsinline="true"
					playsinline="true"
					x5-video-player-type="h5"
					x5-video-player-fullscreen="portraint"></video>
				<image :src="imglink + 'recommend/close.svg'" mode="" class="butt" style="position: absolute; z-index: 9999;" @click="emptyimg(0)"></image>
			</view>
		</view>
		<view class="">
			<view class="msg">
				<view class="required">
					*
				</view>
				视频名称
			</view>
			<textarea class="txt" placeholder="请输入视频介绍" maxlength="40" v-model="reason" />
		</view>
		<view class="">
			<view class="collect-information">
				<view class="collect">*</view>
				培训科目
			</view>
			<view class="arrange">
				<view class="collect-reversal" :class="{'reversal': item.id == subjectId}" @click="choseForm(item)" 
					v-for="(item,index) in subject">{{item.name}}</view>
			</view>
		</view>
		<view class="">
			<view class="thumbs">
				<view class="thumbs-default">*</view>
				默认点赞人数:
				<input class="thumbs-input" type="text" v-model="people" />
				<image :src="imglink + 'member/shangchu.png'" mode="" class="people-delete" @click="empty" v-if="people"></image>
				<view class="" style="display: inline-block;">
					人
				</view>
			</view>
			<view style="height: 2upx; background-color: #DEDEDE; margin: 0upx 4%;"></view>
		</view>
		<view class="">
			<view class="curriculum">
				关联上架活动课程
			</view>
			<image :src="isswitch?openbtn:shutbtn" mode="" class="switch-btn" @click="curriculumSwitch"></image>
			<view class="" v-if="isswitch">
				<view class="curriculum-choice" :class="{'curriculum-choice-reversal': item.activity_id == activityCurriculumId}" 
				@click="curriculumSelect(item)" 
				v-for="(item,index) in activityCurriculum" 
				:key="index">
					<image :src="item.image" mode=""></image>
					<view>
						{{item.name | getStr(19)}}
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="curriculum">
				关联礼盒活动课程
			</view>
			<image :src="isBoxSwitch?openbtn:shutbtn" mode="" class="switch-btn" @click="boxSwitch"></image>
			<view class="" v-if="isBoxSwitch">
				<view class="curriculum-choice" :class="{'curriculum-choice-reversal': item.activity_id == relationId}" 
				@click="curriculumBoxSelect(item)" 
				v-for="(item,index) in relation" 
				:key="index">
					<image :src="item.image" mode=""></image>
					<view>
						{{item.name | getStr(19)}}
					</view>
				</view>
			</view>
		</view>
		<button class="up-btn" @click="modifyVideoEnrollment" v-if="reason">确定修改</button>
		<button class="unbtn" v-if="!reason">确定修改</button>
	</view>
</template>

<script>
	import {uploadFile} from '@/common/alioss.js'
	export default {
		data() {
			return {
				video:[],
				images:[],
				// upvideoimg:'',
				upcoverimg:'',
				openbtn:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_Switch-On.png',
				shutbtn:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_Switch-off.png',
				isswitch:false,
				isBoxSwitch:false,
				// 店铺名称
				store_name:'',
				// 培训科目
				subject:'',
				// 培训科目id
				subjectId:[
					
				],
				// 关联礼盒活动课程
				relation:[
					
				],
				// 关联礼盒活动课程id
				relationId:'',
				// 关联上架活动课程
				activityCurriculum:[
					
				],
				// 关联上架活动课程id
				activityCurriculumId:'',
				// 视频介绍
				reason:'',
				// 默认点赞人数
				people:'',
				upvideoUrl:'',
				imglink: this.$store.state.imgLink,
			}
		},
		filters: {
			getStr(str, new_length) {
			// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
			
		},
		onLoad(options){
			let id = parseInt(options.id,10);
			console.log('进入了onload 获取url的id',id)
			this.videoId = id
			this.getVideoEnrollment()
			this.getAllAubjects()
			this.getActivityCurriculum()
			this.gainShop()
			this.getRelation()
		},
		methods: {
			choseForm(data){
				this.subject.forEach(item => {
					if(item.id == data.id && item.is_check==0){
						this.subjectId = data.id
						console.log(this.subjectId);
					}else if (item.id == data.id && item.is_check==1){
						this.subjectId = data.id
						console.log(this.subjectId);
					}
				})
			},
			empty(){
				this.people = '';
			},
			emptyimg(num){
				if(num == 0){
					this.upvideoUrl = ""
				}else{
					this.upcoverimg = ""
				}
				// if(this.upvideoUrl && this.upcoverimg)
				// {
				// 	this.imageShow = true
				// }else{
				// 	this.imageShow = false
				// }
			},
			//关联课程开关
			curriculumSwitch(){
				this.isswitch = !this.isswitch
			},
			// 关联上架课程选中
			curriculumSelect(data){
				this.activityCurriculum.forEach(item => {
					if(item.activity_id == data.activity_id && item.is_check==0){
						item.is_check = 1
						this.activityCurriculumId = item.activity_id
						console.log(this.activityCurriculumId);
					}else if (item.activity_id == data.activity_id && item.is_check==1){
						item.is_check = 0
						this.activityCurriculumId = data.activity_id
						console.log(this.activityCurriculumId);
					}
				})
			},
			// 关联礼盒课程选中
			curriculumBoxSelect(data){
				this.relation.forEach(item => {
					if(item.activity_id == data.activity_id && item.is_check==0){
						item.is_check = 1
						this.relationId = item.activity_id
						console.log(this.relationId);
					}else if (item.activity_id == data.activity_id && item.is_check==1){
						item.is_check = 0
						this.relationId = data.activity_id
						console.log(this.relationId);
					}
				})
			},
			//关联课程礼盒开关
			boxSwitch(){
				this.isBoxSwitch = !this.isBoxSwitch
			},
			//上传视频
			upVideoEnrollment(){
				let that = this
				uni.chooseVideo({
					// maxDuration:10,
					count: 1,
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePath),'视频')
						uni.showLoading({
							title: '视频上传中'
						})
						uploadFile(res.tempFilePath).then(res => {
							console.log(res)
							if(res.status){
								that.upvideoUrl = res.data.url
								console.log(that.upvideoUrl,'视频地址')
								// that.images.splice(index,1,res.data.url)
								uni.hideLoading()
							}
						}).catch(err => {
							uni.showToast({
								title:err,
								icon:'none',
								duration:5000,
							})
						})
					}
				})
				// uni.chooseVideo({
				// 	maxDuration:60,
				// 	count: 1,
				// 	success: (responent) => {
				// 		let videoFile = responent.tempFilePath;
				// 		console.log(666);
				// 		uni.uploadFile({
				// 			url:this.config.fileUrl,
				// 			method:"POST",
				// 			header:{
				// 				'Authorization':'bearer '+ uni.getStorageSync('token')
				// 			},
				// 			filePath:videoFile,
				// 			name:'file',
				// 			success: (res) => {
				// 				// let videoUrls = JSON.parse(res.data) //微信和头条支持
				// 				let videoUrls = res.data //百度支持
				// 				this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls.result.filePath);
				// 				this.upvideoUrl = videoUrls.result.filePath; //微信

				// 			},
				// 		})
				// 	// this.src = responent.tempFilePath;  //头条
				// 	}
				// })
			},
			//上传封面
			uploadBanner(){
				const that = this;
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
				    success: (chooseImageRes) => {
						console.log(chooseImageRes,'chooseImageRes');
						uni.getImageInfo({
							src: chooseImageRes.tempFilePaths[0],
							success: (image) => {
								uni.showLoading({
									title: '图片上传中'
								})
								
								uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
									console.log(res)
									if(res.status){
										that.upcoverimg=res.data.url
										// that.images.splice(index,1,res.data.url)
										uni.setStorageSync('images',that.images)
										uni.hideLoading()
									}
								}).catch(err => {
									uni.showToast({
										title:err,
										icon:'none',
										duration:5000,
									})
								})
							}
						})
					}
				})
			},
			// 获取培训科目
			getAllAubjects(){
				let data  = {
						token:this.$store.getters.getToken,
						// customer_id:1,
						customer_id:this.$store.getters.getCustomerId,
						store_id:this.$store.getters.getStoreId,
					}
				this.$api.get_allAubjects(data).then(res => {
					console.log(res)
					if(res.status){
						this.subject = res.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取关联上架活动课程
			getActivityCurriculum(){
				let data  = {
						token:this.$store.getters.getToken,
						// customer_id:1,
						customer_id:this.$store.getters.getCustomerId,
						store_id:this.$store.getters.getStoreId,
					}
				this.$api.get_activityCurriculum(data).then(res => {
					console.log(res)
					if(res.status){
						this.activityCurriculum = res.data.data
						console.log(this.activityCurriculum,'[[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]]');
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取关联礼盒活动课程
			getRelation(){
				let data  = {
						token:this.$store.getters.getToken,
						// customer_id:1,
						customer_id:this.$store.getters.getCustomerId,
						store_id:this.$store.getters.getStoreId,
					}
				this.$api.get_activityCurriculum(data).then(res => {
					console.log(res)
					if(res.status){
						this.relation = res.data.data
						console.log('[[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]]',this.relation);
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取店铺名称
			gainShop(){
				let data  = {
						token:this.$store.getters.getToken,
						customer_store_id:this.$store.getters.getStoreId,
					}
				this.$api.gain_shop_msg(data).then(res => {
					console.log(res)
					if(res.status){
						this.store_name = res.data.name
						console.log(this.store_name,"店铺名称");
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取短视频招生
			getVideoEnrollment(){
				console.log("getVideoEnrollment",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId,
				}
				console.log("8888888");
				// 3.发送请求
				this.$api.get_videoEnrollment(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.video = res.data.data
						for(let i = 0; i < this.video.length; i++){
							if( this.video[i].id == this.videoId ){
								this.upvideoUrl = this.video[i].video_url
								this.upcoverimg = this.video[i].head_img
								this.reason = this.video[i].video_detail
								this.subjectId = this.video[i].subjects_id
								this.people = this.video[i].auto_likes_num
								this.relationId = this.video[i].gift_activity_id
								this.activityCurriculumId = this.video[i].activity_id
								console.log(this.activityCurriculumId,"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&");
							}
						}
						if( this.activityCurriculumId ){
							this.isswitch = true
						}
						if( this.relationId ){
							this.isBoxSwitch = true
						}
						console.log(this.video,'获取短视频')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			// 修改短视频
			modifyVideoEnrollment(){
				var img = this.upvideoUrl + '?x-oss-process=video/snapshot,t_0,f_jpg'
				let data  = {
						token:this.$store.getters.getToken,
						id: this.videoId,
						head_img:img,
						video_url:this.upvideoUrl,
						video_detail:this.reason,
						subjects_id: this.subjectId,
						auto_likes_num: this.people,
						activity_id: this.activityCurriculumId,
						gift_activity_id: this.relationId,
					}
				this.$api.modify_videoEnrollment(data).then(res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'修改成功!',
							icon:'none',
							duration:2000,
						})
						setTimeout(() => {
							// uni.navigateTo({
							// 	url:'shortVideoEnrollment?store_id='+ this.store_id
							// })
							uni.navigateBack({
								delta:1
							})
						},1000)
							
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
							console.log(err)
				})
			},
		}
	}
</script>

<style>
	.upload{
		display: inline-block; 
		margin-top: 46upx;
		margin-left: 105upx;
		width: 530upx;
		height: 650upx;
		overflow: auto;
		border-radius: 8upx;
		background-color: #F2F2F2;
		vertical-align: middle;
	}
	.upload>video{
		width: 530upx;
		height: 640upx;
		border-radius: 8upx;
	}
	.bg-img{
		position: absolute;
		top: 90upx;
		width: 230upx;
		height: 300upx;
		z-index: -1;
		margin-left: 35upx;
		border-radius: 10upx;
		background-color: #FFFAF7;
	}
	.upload-content{
		margin-top: 100upx;
		/* margin-left: 17upx; */
		/* width: 296upx; 
		height: 396upx; */
		background-size:100% 100%; 
		text-align: center;
	}
	.upload-img{
		width: 96upx;
		height: 97upx;
		margin-top: 113upx;
	}
	.specs{
		font-family: PingFangSC-Light; 
		font-size: 22upx; 
		color: rgba(0,0,0,0.45);
	}
	.up-video-btn{
		width: 220upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		font-size: 26upx;
		border: 1upx solid #FF8B46;
		border-radius: 80upx;
		line-height: 50upx;
		color: #FF8B46;
	}
	.msg{
		font-family: PingFangSC-Medium;
		margin-top: 18upx;
		margin-bottom: 20upx;
		margin-left: 4%;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.msg .required{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
	}
	.txt{
		margin-left: 30upx;
		margin-bottom: 30upx;
		padding: 24upx;
		width: 642upx;
		height: 138upx;
		font-size: 24upx;
		background-color: #F5F5F5;
		border-radius: 12upx;
	}
	.collect-information{
		position: relative;
		font-family: PingFangSC-Medium;
		margin-bottom: 20upx;
		margin-left: 4%;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.collect{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
	}
	.arrange{
	}
	.arrange-conent{
		float: left;
		margin-bottom: 40upx;
		margin-left: 47upx;
		padding: 10upx 20upx;
		border: 1upx solid #FF664F;
		border-radius: 10upx;
		font-size: 35upx;
		font-weight: 500;
		height: 50upx;
		width: 150upx;
		text-align: center;
		background: #FFFFFF;
		color: #FF664F;
	}
	.collect-reversal{
		display: inline-block;
		margin-bottom: 40upx;
		margin-left: 40upx;
		padding: 10upx 20upx;
		border: 1upx solid #CBC7C7;
		border-radius: 6upx;
		font-size: 35upx;
		font-weight: 500;
		height: 50upx;
		width: 160upx;
		text-align: center;
		background: #FFFFFF;
		color: #666666;
	}
	.reversal{
		color: #FF664F;
		border: 1upx solid #FF664F;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/hook.svg);
		background-repeat: no-repeat;
		background-size: 30rpx 30rpx;
		background-position: right bottom;  
	}
	.thumbs{
		font-family: PingFangSC-Medium;
		margin-left: 4%;
		margin-bottom: 20upx;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 30upx;
		font-weight: bold;
	}
	.thumbs-default{
		display: inline-block;
		margin-right: 10upx;
		font-size: 35upx;
		color: #FF391F;
		vertical-align: top;
	}
	.thumbs-input{
		display: inline-block;
		margin-top: -5upx;
		margin-left: 20upx;
		padding-right: 60upx;
		width: 340upx;
		vertical-align: top;
	}
	.people-delete{
		position: absolute;
		margin-top: 2upx;
		right: 94upx;
		display: inline-block;
		width: 36upx;
		height: 36upx;
	}
	.curriculum{
		display: inline-block;
		font-family: PingFangSC-Medium;
		margin-left: 4%;
		margin-top: 50upx;
		margin-bottom: 50upx;
		line-height: 42upx;
		letter-spacing: 0;
		color: #151515;
		font-size: 28upx;
		font-weight: bold;
	}
	.switch-btn{
		position: absolute;
		display: inline-block;
		right: 4%;
		margin-top: 40upx;
		width: 120upx;
		height: 70upx;
	}
	.curriculum-choice{
		display: inline-block;
		margin-left: 4%;
		margin-bottom: 40upx;
		padding: 15upx;
		width: 300upx;
		overflow: hidden;
		border-radius: 8upx;
		border: 1upx solid #E6E1E1;
		vertical-align: middle;
	}
	.curriculum-choice-reversal{
		border: 1upx solid #FF664F;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/hook.svg);
		background-repeat: no-repeat;
		background-size: 50rpx 50rpx;
		background-position: right bottom;  
	}
	.curriculum-choice>view{
		font-size: 28upx;
	}
	.curriculum-choice>image{
		width: 290upx;
		height: 260upx;
	}
	.up-btn{
		position: relative;
		width: 638upx;
		margin-top: 40upx;
		margin-bottom: 40upx;
		color: #ffffff;
		font-size: 34upx;
		line-height: 100upx;
		border-radius: 60upx;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/member-center.png);
	}
	.unbtn{
		position: relative;
		width: 638upx;
		color: #ffffff;
		margin-top: 40upx;
		margin-bottom: 40upx;
		font-size: 34upx;
		line-height: 100upx;
		border-radius: 60upx;
		background-color: #F6CDAB;
	}
	.butt{
		position: absolute;
		display: inline-block;
		margin-left: -50upx;
		margin-top: 35upx;
		width: 36upx;
		height: 36upx;
	}
	.videobutt{
		position: absolute;
		display: inline-block;
		margin-left: -50upx;
		margin-top: 35upx;
		line-height: 30upx;
		text-align: center;
		width: 36upx;
		height: 36upx;
		border-radius: 100upx;
		background-color: #ffffff;
	}
</style>
